<template>
  <div class="workshop-inspection-width-board-detail">
    <one-title title="工序详情" @refreshData="init">
    </one-title>
    <div class="fixed_top_56">
      <!--详情页面tabs和按钮-->
      <div class="workstage_detail" v-loading="isLoading">
        <!--右侧按钮-->
        <div class="right_panel">
          <el-button type="success" class="btn_kai" v-if="isShowBtn" :disabled="startBtnStatus" @click="workStart">
            <i></i>
            <span>开始检验</span>
          </el-button>
          <el-button type="success" class="btn_wan" v-if="!isShowBtn" :disabled="completeBtnStatus" @click="completeRegister">
            <i></i>
            <span>检验完工</span>
          </el-button>
          <el-button type="primary" class="btn_can" :disabled="paramBtnStatus" @click="paramRecord">
            <i></i>
            参数记录
          </el-button>
          <el-button type="primary" class="btn_fa" :disabled="unqualifiedBtnStatus" @click="unqualified">
            <i></i>
            发起不合格申请
          </el-button>
          <el-button class="btn_wen" :disabled="checkProblemBtnStatus" @click="problemFeedback">
            <i></i>
            问题反馈
          </el-button>
        </div>
        <!--左侧详情信息tab-->
        <div class="left_panel">
          <div class="workstage_header">
            <span
              class="sort_panel"
              :style="getStatusStyle(1, workstage.workstageProcessStatusValue)">
              {{workstage.sort}}</span>
            <div class="header_panel name_panel">
              <p>{{workstage.workstageName}}</p>
              <p>{{workstage.turnoverNumber}}</p>
            </div>
            <div class="header_panel date_panel">
              <p>
                <i></i>实际开始时间:
                <span>&nbsp;{{workstage.practicalStartDate || '&nbsp;- - : - - : - -'}}</span>
              </p>
              <p>
                <i></i>实际完成时间:
                <span>&nbsp;{{workstage.practicalEndDate || '&nbsp;- - : - - : - -'}}</span>
              </p>
            </div>
            <div
              class="header_panel status_panel"
              :style="getStatusStyle(2, workstage.workstageProcessStatusValue)">
              {{workstage.workstageProcessStatusLabel}}
            </div>
          </div>
          <div class="workstage_content">
            <workstage-file-tabs
              :viewTechnologyFile="viewTechnologyFile"
              :workstage="workstage"
              :gridItems="gridItems"
              :tabsList="tabsList"
            ></workstage-file-tabs>
          </div>
        </div>
      </div>
      <!--详情页面底部工序进度-->
      <div class="workstage_proccess_panel">
        <workstage-steps :proccessList="proccessList" :workstageName="workstage.workstageName"></workstage-steps>
      </div>
      <!--参数记录-->
      <work-stage-param-record ref="WorkStageParamRecord" @submitSuccess="init"></work-stage-param-record>
      <!--完工登记-->
      <complete-register ref="CompleteRegister" @submitSuccess="init"></complete-register>
      <!--开工登记-->
      <work-stage-start ref="workStageStart" @submitSuccess="init"></work-stage-start>
      <!--问题反馈-->
      <problem-feedback ref="ProblemFeedback" @submitSuccess="init"></problem-feedback>
    </div>
  </div>
</template>

<script>
import searchList from './columns'
import gridItems from './gridItems'
import {WorkStageStart} from '../workShopInspectionComps'
import CompleteRegister from '@/components/completion/CompleteRegister'
import ProblemFeedback from '@/components/workbenchComps/ProblemFeedback'
import WorkstageSteps from '@/components/workbenchComps/WorkstageSteps'
import WorkstageFileTabs from '@/components/workbenchComps/WorkstageFileTabs'
import {WorkStageParamRecord} from '@/components/Template'
export default {
  name: 'WorkShopInspectionWidthBoardDetail',
  data() {
    return {
      // 工序详情tabs
      tabsList: [
        {name: 'first', label: '基本信息'},
        {name: 'second', label: '工艺文件'},
        {name: 'third', label: '制造图纸'},
        {name: 'fourth ', label: '工序上料清单'},
        {name: 'fifth ', label: '工装明细'},
        {name: 'sixth ', label: '设备文件'},
        {name: 'seventh ', label: '其他文件'},
      ],
      proccessList: [], // 工序进度列表
      workstage: {}, // 当前工序对象
      searchList: searchList, // 表格列
      gridItems: gridItems, // 栅格列表
      isLoading: false, // 页面是否加载
      viewTechnologyFile: {} // 工序技术文件
    }
  },
  components: {
    WorkstageSteps,
    WorkstageFileTabs,
    WorkStageStart,
    CompleteRegister,
    WorkStageParamRecord,
    ProblemFeedback
  },
  computed: {
    // 登录用户id
    userId() {
      return this.$store.state.userInfo.staffId || ''
    },
    // 是否显示开工/完工按钮
    isShowBtn() {
      return this.workstage.workstageProcessStatusValue === 'ToBeStarted' || this.workstage.workstageProcessStatusValue === 'NotArrive'
    },
    // 开工记录按钮状态
    startBtnStatus() {
      return this.workstage.turnoverStatusValue !== 'Normal' || this.workstage.workstageProcessStatusValue !== 'ToBeStarted'
    },
    // 完工记录按钮状态
    completeBtnStatus() {
      const status1 = this.workstage.turnoverStatusValue !== 'Normal' || this.workstage.workstageProcessStatusValue !== 'Started'
      const status2 = this.workstage.startWorkStaffId && this.workstage.startWorkStaffId !== this.userId
      return status1 || status2
    },
    // 参数记录按钮
    paramBtnStatus() {
      const status1 = this.workstage.workstageProcessStatusValue === 'ToBeStarted' || this.workstage.workstageProcessStatusValue === 'NotArrive'
      const status2 = !this.workstage.paramTemplateId
      return status1 || status2
    },
    // 发起不合格申请
    unqualifiedBtnStatus() {
      const status1 = this.workstage.turnoverStatusValue !== 'Normal' && this.workstage.turnoverStatusValue !== 'Paused'
      const status2 = this.workstage.workstageProcessStatusValue === 'Finished' || this.workstage.workstageProcessStatusValue === 'NotArrive'
      const status3 = this.workstage.startWorkStaffId && this.workstage.startWorkStaffId !== this.userId
      return status1 || status2 || status3
    },
    // 问题反馈按钮
    checkProblemBtnStatus() {
      const status1 = this.workstage.workstageProcessStatusValue === 'NotArrive' || this.workstage.workstageProcessStatusValue === 'Finished'
      const status2 = this.workstage.turnoverStatusValue !== 'Normal'
      const status3 = this.workstage.startWorkStaffId ? this.userId !== this.workstage.startWorkStaffId : false
      return status1 || status2 || status3
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    /**
     * 根据工序进度获取对应的样式
     * @param index 需要添加样式的dom位置(1:工序序号节点；2: 工序进度状态节点)
     * @param value 工序进度value
     */
    getStatusStyle(index, value) {
      switch (value) {
        // 待开工
        case 'ToBeStarted':
          return index === 1 ? { background: '#2196f3' } : {color: '#2196f3'}
        // 已开工
        case 'Started':
          return index === 1 ? { background: '#f3c53d' } : {color: '#f3c53d'}
        // 已完工
        case 'Finished':
          return index === 1 ? { background: '#45c263' } : {color: '#45c263'}
        // 未到达
        case 'NotArrive':
          return index === 1 ? { background: '#ff6868' } : {color: '#ff6868'}
      }
    },
    // 获取当前工序
    init() {
      this.isLoading = true
      const workstageId = this.$route.query.id
      this.$store.dispatch('saveData', {
        method: 'get',
        url: 'a/turnoverworkstage/turnoverWorkstage/get/' + workstageId,
        noCommit: true
      }).then((res) => {
        this.workstage = res.data
        this.workstage.planStartDate = this.formatDate(this.workstage.planStartDate)
        this.workstage.planEndDate = this.formatDate(this.workstage.planEndDate)
        this.getDetailData()
      }).catch(() => {
        this.isLoading = false
      })
    },
    // 获取工序文件信息、工序进度信息
    async getDetailData() {
      await this.getWorkstageProcess()
      await this.getWorkstageFiles()
      this.isLoading = false
    },
    // 获取工序进度列表
    async getWorkstageProcess() {
      return this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/turnoverworkstage/turnoverWorkstage/getworkstageproccessstatus',
        data: {turnoverNumber: this.workstage.turnoverNumber},
        noCommit: true
      }).then((res) => {
        this.proccessList = res.data
      })
    },
    // 获取工序文件信息
    async getWorkstageFiles() {
      return this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/turnoverworkstage/turnoverWorkstage/viewTechnologyFile',
        data: {turnoverWorkstageId: this.workstage.id, workorderId: this.workstage.workorderId},
        noCommit: true
      }).then(res => {
        this.viewTechnologyFile = res.data
      })
    },
    // 参数记录
    paramRecord() {
      if (Object.keys(this.workstage).length === 0) return
      const selectData = [this.workstage]
      this.$refs.WorkStageParamRecord.openDialog(selectData)
    },
    /**
     * 完工登记
     */
    completeRegister() {
      if (Object.keys(this.workstage).length === 0) return
      const selectData = [this.workstage]
      this.$refs.CompleteRegister.openDialog(selectData, 'workShopBench')
    },
    // 开工登记
    workStart() {
      if (Object.keys(this.workstage).length === 0) return
      const selectData = [this.workstage]
      if (selectData.some((item) => item.inputQuantity === 0)) {
        return this.tipMessage('error', '投料数量为0的工序不能开工，请通知班组长终止任务')
      }
      this.$refs.workStageStart.openDialog(selectData)
    },
    // 发起不合格申请
    unqualified() {
      this.mesConfirm('选中的记录将进行不合格申请单操作, 是否继续?', '不合格申请单提示').then(() => {
        this.$store.dispatch('saveData', {
          method: 'post',
          url: 'a/workstageproblemprocess/workstageProblemProcess/qmsprocess',
          data: {
            turnoverWorkstageId: this.workstage.id,
            viewSource: 2
          },
          noCommit: true
        }).then(() => {
          this.tipMessage('success', '提交成功')
          this.init()
        })
      })
    },
    /**
     * 问题反馈
     * @param row 当前数据
     */
    problemFeedback() {
      this.$refs.ProblemFeedback.openDialog(this.workstage)
    },
    /**
     * 格式化日期
     * @param date 时间值
     */
    formatDate(date) {
      if (date) return this.moment(date).format('YYYY-MM-DD')
    },
    /**
     * 提示
     * @param type 提示类型
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
  .workshop-inspection-width-board-detail{
    .workstage_detail{
      padding: 20px;
      overflow: hidden;
      .left_panel{
        margin-right: 340px;
        padding-right: 20px;
        .workstage_header{
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 100px;
          border: solid 1px #dcdfe6;
          margin-bottom: 20px;
          position: relative;
          padding-left: 60px;
          box-sizing: border-box;
          .sort_panel{
            width: 60px;
            height: 100px;
            font-size:24px;
            color:#fff;
            text-align: center;
            line-height: 100px;
            position: absolute;
            left:-1px;
            top: -1px;
          }
          .header_panel{
            height: 100%;
            padding:20px 0 0 20px;
            box-sizing: border-box;
            &.name_panel{
              p{
                &:nth-child(1){
                  font-size: 24px;
                  color: #333333;
                  margin-bottom: 16px;
                  line-height: 24px;
                }
                &:nth-child(2){
                  font-size: 16px;
                  color: #7e8e9f;
                }
              }
            }
            &.date_panel{
              p{
                font-size: 18px;
                color: #333333;
                display: flex;
                align-items: center;
                i{
                  width: 18px;
                  height: 18px;
                  display: inline-block;
                  background-size: contain;
                  background-position: 50%;
                  background-repeat: no-repeat;
                  margin-right: 10px;
                  margin-top: 3px;
                }
                &:nth-child(1){
                  margin-bottom: 10px;
                  line-height: 24px;
                  i{
                    background-image: url('../../../../assets/img/start_date.png');
                  }
                }
                &:nth-child(2){
                  i{
                    background-image: url('../../../../assets/img/end_date.png');
                  }
                }
                span{
                  display: inline-block;
                  padding-top: 2px;
                }
              }
            }
            &.status_panel{
              font-size: 36px;
              padding-right: 30px;
              padding-top: 0;
              line-height: 100px;
              font-weight: 600;
            }
          }
        }
        .workstage_content{
          height: 500px;
          border: solid 1px #dcdfe6;
          .tab_content_item .tab_file_item{
            height: 411px;
            .file_list.tab_pane{
              border:none;
              padding-left: 0;
            }
          }
        }
      }
      .right_panel{
        width: 340px;
        float:right;
        height: 622px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .el-button{
          border:none;
          height: 140px;
          width: 100%;
          font-size: 24px;
          margin: 0!important;
          border-radius: 2px!important;
          &>span{
            display: flex;
            align-items: center;
            padding-left: 60px;
          }
          i{
            width: 40px;
            height: 40px;
            display: inline-block;
            background-repeat: no-repeat;
            background-size: contain;
            padding-right: 20px;
          }
          &.is-disabled{
            color: #a1b1c1!important;
            background-color: #ebf0f6!important;
          }
          &.btn_kai{
            i{
              background-image: url('../../../../assets/img/btn_open_n.png');
            }
            &.is-disabled{
              i{
                background-image: url('../../../../assets/img/btn_open_d.png');
              }
            }
          }
          &.btn_wan{
            i{
              background-image: url('../../../../assets/img/btn_over_n.png');
            }
            &.is-disabled{
              i{
                background-image: url('../../../../assets/img/btn_over_d.png');
              }
            }
          }
          &.btn_can{
            i{
              background-image: url('../../../../assets/img/btn_canshu_n.png');
            }
            &.is-disabled{
              i{
                background-image: url('../../../../assets/img/btn_canshu_d.png');
              }
            }
          }
          &.btn_fa{
            i{
              background-image: url('../../../../assets/img/btn_buhege_n.png');
            }
            &.is-disabled{
              i{
                background-image: url('../../../../assets/img/btn_buhege_d.png');
              }
            }
          }
          &.btn_wen{
            border: 1px solid #dcdfe6;
            i{
              background-image: url('../../../../assets/img/btn_fankui_n.png');
            }
            &.is-disabled{
              i{
                background-image: url('../../../../assets/img/btn_fankui_d.png');
              }
            }
            &:hover{
              background-color: #f2f2f2;
              color:#606266;
            }
            &:focus{
              background-color: #fff;
              color:#606266;
            }
          }
        }
        .footer_btns{
          margin-top: 1px;
          display: flex;
          justify-content: space-between;
          .el-button{
            width: 160px;
            height: 140px;
            border: solid 1px #dcdfe6;
            margin: 0!important;
            padding: 0!important;
            &>span{
              display: block;
              padding: 0!important;
            }
            i{
              display: block;
              padding: 0;
              width: 100%;
              background-position: 50%;
              margin-bottom: 20px;
            }
          }
        }
      }
    }
    .workstage_proccess_panel{
      margin: 0 20px 20px 20px;
      height: 100px;
      padding: 25px 20px 0 20px;
      border: solid 1px #dcdfe6;
      box-sizing: border-box;
    }
    .info_grid .info_grid_item{
      line-height: 36px;
    }
  }
</style>
